<template>
  <view class="address-select-page w100p f fd-col ai-c">
    <nav-bar left-text="选择地址簿" />
    <bg-set background="#f2f3f7" />
    <scroll-view
      scroll-y="true"
      class="scroll-y"
      @scrolltolower="scrolltolower"
    >
      <view>
        <template v-if="loading">
          <loading />
        </template>
        <template v-else-if="!loading && userInfos.length >= 1">
          <address-card
            ref="addressCards"
            v-for="(item, index) in userInfos"
            :key="item"
            :user-info="item"
            :select-status="selectStatus[index]"
            :class="cardClass(index)"
            @click="handleSelect(index)"
          />
        </template>
        <template v-else-if="!loading && userInfos.length === 0 && success">
          <loading-empty
            tip="没有地址可供选择，快去创建吧~"
            :button-text="mode === 0 ? '创建收件地址' : '创建寄件地址'"
            :url="`/pages/profile/addressManagement/address-new-built?mode=${mode}`"
          />
        </template>
        <template v-else-if="!loading && userInfos.length === 0 && !success"
          ><loading-error
        /></template>
        <scroll-view-holder />
      </view>
    </scroll-view>
    <view class="address-select-page__footer f jc-c ai-c">
      <van-button
        :disabled="disabled"
        type="primary"
        @click="select"
        round
        style="width: 80%"
        >确认选择</van-button
      >
    </view>
  </view>
</template>
<script>
import StorageOperation from "/utils/storage";
import profileApI from "/api/modules/profile";
import AddressCard from "./components/address-card.vue";
export default {
  name: "address-select-page",
  components: {
    AddressCard,
  },
  data() {
    return {
      loading: false,
      success: true,
      userInfos: [],
      selectStatus: [],
      formData: {},
      mode: 0,
      index: 0,
      currentIndex: "",
      disabled: true,
    };
  },
  onLoad(option) {
    this.mode = Number(option.mode);
    // 选中了地址，再次进入选地址页面，样式绑定+选择
    if (option.index) {
      this.currentIndex = Number(option.index);
      this.handleSelect(this.currentIndex);
    }
  },
  onShow() {
    setTimeout(() => {
      this.getUserInfo();
    }, 10);
  },
  methods: {
    scrolltolower() {
      uni.showToast({
        title: "我可是有底线的哈",
        duration: 2000,
        icon: "none",
        position: "top",
      });
    },
    handleSelect(index) {
      this.selectStatus = new Array(this.userInfos.length).fill(false);
      this.selectStatus[index] = true;
      this.disabled = false;
      this.index = index;
      this.currentIndex = index;
    },
    getUserInfo() {
      this.loading = true;
      this.success = true;
      this.userInfos = [];
      const userName = StorageOperation.getStorageSync("userName").value;
      profileApI
        .getUserInfo({ userName })
        .then((res) => {
          this.userInfos = res.filter((item) => item.mode === this.mode);
        })
        .catch((err) => {
          this.success = false;
          uni.showToast({
            title: "加载列表失败",
            icon: "error",
            duration: 1000,
            position: "top",
          });
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    select() {
      if (this.mode === 1) {
        this.$store.commit("setSelectObj_mail", {
          index: this.index,
          subUserName: this.userInfos[this.index].subUserName,
          subUserPhone: this.userInfos[this.index].subUserPhone,
          subUserAddress: this.userInfos[this.index].subUserAddress,
        });
      } else {
        this.$store.commit("setSelectObj_pickUp", {
          index: this.index,
          subUserName: this.userInfos[this.index].subUserName,
          subUserPhone: this.userInfos[this.index].subUserPhone,
          subUserAddress: this.userInfos[this.index].subUserAddress,
        });
      }
      uni.switchTab({
        url: "/pages/mail/mail",
      });
    },
    // 绑定样式
    cardClass(index) {
      if (this.currentIndex === index) {
        return {
          active: true,
        };
      }
      return {};
    },
  },
};
</script>
<style lang="scss" scoped>
.address-select-page {
  position: fixed;
  height: 100vh;
  .scroll-y {
    height: calc(100vh - 44rpx);
    .active {
      ::v-deep .address-card__user-address {
        background-color: #f4f7ff;
        border-radius: 20rpx;
      }
    }
  }
  &__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    background-color: #fff;
    box-shadow: 0 -2px 4px #eee;
  }
}
</style>
